<template>
    <div>
        <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
  </form>
  <div v-for="(v,index) in mlist" :key="index" class="ge" @click="miuse(v.musicMp3Url)" v-show="mlist.length>0">
           <div class="paixv">
               <img :src="v.albumPicUrl" class="img">
           </div>
           <div class="p">
            <p>歌曲：{{v.musicName}}</p>
            <p>演唱：{{v.artistName}}</p>
            <p>专辑：{{v.albumName}}</p>
           </div>
           
        </div>
<p v-show="mlist.length==0">没有搜到相关结果</p>
    </div>
</template>
<script>
export default {
    name:"sarch",
    data(){
        return{
            value:"",
            mlist:[],
        }
    },
    methods:{
        miuse(v){
            this.$store.commit("miuse",v);
        },
        onCancel(){
            this.$router.push("/fen");
        },
        onSearch(){
           
            var token = sessionStorage.getItem("token");
            
            var str =  `token=${token}&keyword=${this.value}`
            this.axios.post("http://123.57.130.65:8080/music/findByKeyword",str ).then(res=>{
                console.log("ok");
                console.log(res);
                if(res.data.code==200){
                    this.mlist=res.data.data;
                    sessionStorage.setItem("smiuse",this.value);
                }else{
                    this.$router.push("/rester");
                }

            }) 
        }

    },
    mounted(){
        
       
        if(sessionStorage.getItem("smiuse")){
          var   value = sessionStorage.getItem("smiuse");
            var token = sessionStorage.getItem("token");
            
            var str =  `token=${token}&keyword=${value}`
            this.axios.post("http://123.57.130.65:8080/music/findByKeyword",str ).then(res=>{
                console.log("ok");
                console.log(res);
                if(res.data.code==200){
                    this.mlist=res.data.data;
                    sessionStorage.setItem("smiuse",this.value);
                }else{
                    this.$router.push("/rester");
                }

            }) 
        }
    
        }
    
}
</script>
<style scoped>
.paixv{
    width: 60px;
    height: 70px;
    display: inline;
    flex-wrap:wrap;
    margin: 10px;
}
.img{
     width: 60px;
    height: 70px;
}

.ge{
    display: flex;
    background-color: #ddf8f0;
    width: 100%;
    height: 100px ;
    margin-top: 5px;
}
.p{
    font-size: 10px;
    color: #7bebe1;
}
</style>